<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档处理</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#add").click(function () {
                let inText = $("#inText").val();
                let li = "<li>" + inText + "</li>";
                // $("ul").html($("ul").html()+li)
                // 内部插入,即父子标签
                // $("ul").append(li);
                // $(li).appendTo($("ul"));

                // 外部插入,即同级标签
                // $("li:first").before(li);
                // $(li).insertBefore($("li:first"))
                // $("li:last").after(li);
                $(li).insertAfter($("li:last"))
            });
            $("li").click(function () {
                // let text = $(this).html();
                // let li = "<li>" + text + "</li>";

                // let li = $(this).clone();
                let li = $(this).clone(true);
                $("ul").append(li);
            });
            $("#clear").click(function () {
                // $("ul").html("");
                $("ul").empty();
            });
            $("#remove").click(function () {
                $("ul").remove();
            });
        })
    </script>
</head>
<body>
<input type="text" id="inText">
<button id="add">追加</button>
<button id="clear">清空</button>
<button id="remove">删除</button>
<hr>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
</body>
</html>